<template>
  <!-- 系统应用 -->
  <div class="system-application">
    <div class="service-wrap">
      <!-- 首页进入时显示 -->
      <van-row v-if="isShowNbtn">
        <van-col v-for="(m, index) in sysTemApplicationList" :key="index">
          <van-row class="sub-title">
            <van-col span="12">{{ m.name }}</van-col>
            <van-col span="12" style="text-align: right;">
              <van-button round type="info" @click="showEdit(m)">{{
                m.buttonText
              }}</van-button>
            </van-col>
          </van-row>
          <van-grid :border="false" :gutter="10">
            <van-grid-item
              v-for="(item, idx) in m.applicationList"
              :key="idx"
              @click="skipRouter(item)"
            >
              <svg-icon
                icon-class="deletIcon"
                class="delet-svg"
                v-if="m.isEdit"
                @click.stop="deleteAPP(item)"
              />
              <van-image :src="item.serviceIcon" lazy-load />
              <span class="van-grid-item__text">{{ item.serviceName }}</span>
            </van-grid-item>
          </van-grid>
        </van-col>
      </van-row>
      <!-- 我的收藏页进入显示 -->
      <van-row v-else>
        <van-col>
          <van-grid :border="false" :gutter="10">
            <van-grid-item
              v-for="(item, idx) in sysTemApplicationList"
              :key="idx"
              @click="skipRouter(item)"
            >
              <van-image :src="item.serviceIcon" lazy-load />
              <span class="van-grid-item__text">{{ item.serviceName }}</span>
            </van-grid-item>
          </van-grid>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'sysTemApplication',
  data() {
    return {
      sysTemApplicationList: [] // 应用数据
    }
  },
  mounted() {
    this.initPageDate() // 初始化应用数据
  },
  computed: {
    isShowNbtn() {
      return this.$route.query.type != 1
    }
  },
  methods: {
    // 获取应用数据 -- 当前人员信息查询
    initPageDate() {
      if (!this.isShowNbtn) {
        // 首页进入后的样式
        this.sysTemApplicationList = [
          {
            id: 1,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/87.png'),
            serviceName: '财务系统'
          },
          {
            id: 2,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/88.png'),
            serviceName: 'OA系统'
          },
          {
            id: 3,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/89.png'),
            serviceName: '教务系统'
          },
          {
            id: 4,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/91.png'),
            serviceName: '邮件系统'
          },
          {
            id: 5,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/93.png'),
            serviceName: '学年考核'
          },
          {
            id: 6,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/91.png'),
            serviceName: '工会系统'
          },
          {
            id: 7,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/92.png'),
            serviceName: 'istudent社区'
          },
          {
            id: 8,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/90.png'),
            serviceName: '财务系统'
          },
          {
            id: 9,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/92.png'),
            serviceName: 'istudent社区'
          },
          {
            id: 1,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/87.png'),
            serviceName: '财务系统'
          },
          {
            id: 2,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/88.png'),
            serviceName: 'OA系统'
          },
          {
            id: 3,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/89.png'),
            serviceName: '教务系统'
          },
          {
            id: 4,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/91.png'),
            serviceName: '邮件系统'
          },
          {
            id: 5,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/93.png'),
            serviceName: '学年考核'
          },
          {
            id: 6,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/91.png'),
            serviceName: '工会系统'
          },
          {
            id: 7,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/92.png'),
            serviceName: 'istudent社区'
          },
          {
            id: 8,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/90.png'),
            serviceName: '财务系统'
          },
          {
            id: 9,
            url: 'http://www.baidu.com',
            serviceIcon: require('@/assets/images/92.png'),
            serviceName: 'istudent社区'
          }
        ]
      } else {
        // 系统收藏时的样式
        this.sysTemApplicationList = [
          {
            name: '个人业务专区',
            type: 'personal',
            applicationList: [
              {
                id: 1,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/87.png'),
                serviceName: '财务系统'
              },
              {
                id: 2,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/88.png'),
                serviceName: 'OA系统'
              },
              {
                id: 3,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/89.png'),
                serviceName: '教务系统'
              },
              {
                id: 4,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/91.png'),
                serviceName: '邮件系统'
              },
              {
                id: 5,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/93.png'),
                serviceName: '学年考核'
              },
              {
                id: 6,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/91.png'),
                serviceName: '工会系统'
              },
              {
                id: 7,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/92.png'),
                serviceName: 'istudent社区'
              },
              {
                id: 8,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/90.png'),
                serviceName: '财务系统'
              },
              {
                id: 9,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/92.png'),
                serviceName: 'istudent社区'
              }
            ]
          },
          {
            name: '人才培养专区',
            type: 'personal',
            applicationList: [
              {
                id: 1,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/87.png'),
                serviceName: '财务系统'
              },
              {
                id: 2,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/88.png'),
                serviceName: 'OA系统'
              },
              {
                id: 3,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/89.png'),
                serviceName: '教务系统'
              },
              {
                id: 4,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/91.png'),
                serviceName: '邮件系统'
              },
              {
                id: 5,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/93.png'),
                serviceName: '学年考核'
              },
              {
                id: 6,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/91.png'),
                serviceName: '工会系统'
              },
              {
                id: 7,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/92.png'),
                serviceName: 'istudent社区'
              },
              {
                id: 8,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/90.png'),
                serviceName: '财务系统'
              },
              {
                id: 9,
                url: 'http://www.baidu.com',
                serviceIcon: require('@/assets/images/92.png'),
                serviceName: 'istudent社区'
              }
            ]
          }
        ]
        this.sysTemApplicationList.map(item => {
          item.buttonText = '编辑'
          item.applicationList.map(m => {
            m.isEdit = false
          })
        })
      }
    },
    // 编辑应用
    showEdit(item) {
      console.log(item)
      item.isEdit = !item.isEdit
      item.buttonText = item.isEdit == false ? '编辑' : '完成'
      this.$forceUpdate() // 强制刷新与this.$set相同
    },
    // 删除应用
    deleteAPP(item) {
      // 接后台接口并刷新当前页面
      this.initPageDate()
      // 正确信息
      this.$notify({
        type: 'success',
        message: '成功删除'
      })
    },
    // 跳转到相应的应用界面内
    skipRouter(item) {
      window.location.href = item.url
    }
  }
}
</script>

<style lang="less" scoped>
/** 系统应用 */
.system-application {
  height: 100%;
  overflow-x: hidden;
  overflow: auto;
  /* 服务项 */
  .service-wrap {
    padding: 10px 0;
    border-top: 0.5px solid #e6e6e8;
    // 标题
    .sub-title {
      font-size: 16px;
      padding: 0 10px;
      .van-col {
        position: relative;
        &:first-of-type {
          padding-left: 11px;
          color: #4b4b4b;
          &::before {
            position: absolute;
            content: '';
            width: 4px;
            height: 12px;
            background-color: #6a4781;
            left: 0;
            transform: translateY(50%);
            bottom: 50%;
          }
        }
      }
      .van-button {
        width: 50px;
        height: 25px;
        padding: 0;
        line-height: 25px;
        text-align: center;
        background-color: #6a4781;
        border: none;
        span {
          font-size: 12px;
          color: #fff;
        }
      }
    }
    .van-grid-item {
      position: relative;
      .delet-svg {
        position: absolute;
        width: 15px;
        height: 15px;
        right: 10px;
        top: 15px;
        z-index: 20;
      }
    }
    .van-grid-item__text {
      padding-top: 9px;
      width: 15vw;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .van-grid-item__content {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
}
</style>
